<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="content-type" content="text/html" charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="initial-scale=1.0,use-scalable=yes,width=device-width"/>
		<title>Right_Map</title>
		<link rel="stylesheet" type="text/css" href="css/map.css"/>
		<link rel="stylesheet" type="text/css" href="http://cache.amap.com/lbs/static/main1119.css"/>
		<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
		<script language="JavaScript" src="http://webapi.amap.com/maps?v=1.3&key=7902f066102c502f768c0bdfa00dae1d&plugin=AMap.Scale,AMap.OverView,AMap.ToolBar,AMap.Autocomplete,AMap.PlaceSearch"></script>
		<!--<script language="JavaScript" src="http://webapi.amap.com/maps/plugin?v=1.3&key=7902f066102c502f768c0bdfa00dae1d&plugin=AMap.Autocomplete"></script>-->
		<!--<script type="text/javascript" charset="UTF-8" src="http://webapi.amap.com/maps/plugin?v=1.3&key=7902f066102c502f768c0bdfa00dae1d&cls=AMap.Autocomplete,AMap.PlaceSearch"></script>-->
	</head>

	<body>
	<div id="mapcanvas" class="mapcanvas"></div>
	<div id="autosearch" class="autosearch">
		<img class="maplogo" src="images/maplogo.gif" draggable="false"/>
        <input type="text" id="searchipt" name="searchipt" maxlength="256" autocomplete="on" placeholder="搜索位置、公交站、地铁站" value=""/>
    </div>
        <!--<div id="controlbox" class="controlbox">
        	<li>
        		<button onclick="javascript:addMapType()">添加地图类型切换</button>
        		<button onclick="javascript:delMapType()">移除地图类型切换</button>
        	</li>
        	<li>
        		<button onclick="javascript:addCircleEditor()">添加圆形编辑器</button>
        		<button onclick="javascript:delCircleEditor()">移除圆形编辑器</button>
        	</li>
        	<li>
        		<button onclick="javascript:addPloygonEditor()">添加多边形编辑器</button>
        		<button onclick="javascript:delPloygonEditor()">移除多边形编辑器</button>
        	</li>
        	<li>
        		<button onclick="javascript:addMouseTool()">添加鼠标打点工具</button>
        		<button onclick="javascript:delMouseTool()">移除鼠标打点工具</button>
        	</li>
        </div>-->
        <!--<div id="controlbox" class="controlbox">
        	 <p id="lnglat"></p>
        <ul>
            <li>
                <button onclick="to2D();">2D地图</button>
                <p>是一张普通的地图，地图级别是13。</p>
            </li>
            <li>
                <button onclick="addTraffic();">实时路况</button>
                <p>叠加上实时交通，路况信息。红色最堵。</p>
            </li>
            <li>
                <button onclick="addRoadNetLayer();">路网</button>
                <p>叠加上路网</p>
            </li>            
            <li>
                <button onclick="yunLayer();">麻点图</button>
                <p>麻点图，就是云图的云图层显示。</p>
            </li>            
            <li>
                <button onclick="addsatellLayer();">卫星图</button>
                <p>换上卫星图</p>
            </li>
            <li>
                <button onclick="addBuildingLayer();">3D地图</button>
                <p>显示3D楼块，只有地图级别在会显示。</p>
            </li>            
            <li>
                <button onclick="googlMap();">自定义底图</button>
                <p>自定义底图，是需要自己切图的。这里展示了谷歌的底图。</p>
            </li>
            <li>
                <button onclick="xianjianLayer();">仙剑地图</button>
                <p>显示的仙剑地图，感觉很帅。其实这是一个图片覆盖物，而不是图层。</p>
            </li>
            <li>
                <button onclick="jiejing();">街景</button>
                <p>显示街景，点了这个要刷新才能回来，哈哈。</p>
            </li>
        </ul>
        </div>-->
	<!--<div class='button-group' style="background-color:#0d9bf2;right:125px">
    <input type="checkbox" onclick="toggleScale(this)"/>比例尺
    <input type="checkbox" id="toolbar" onclick="toggleToolBar(this)"/>工具条
    <input type="checkbox" id="toolbarDirection" disabled onclick="toggleToolBarDirection(this)"/>工具条方向盘
    <input type="checkbox" id="toolbarRuler" disabled onclick="toggleToolBarRuler(this)"/>工具条标尺
    <input type="checkbox" id="overview" onclick="toggleOverViewShow(this)"/>显示鹰眼
    <input type="checkbox" id="overviewOpen" disabled onclick="toggleOverViewOpen(this)"/>展开鹰眼
    </div>-->
    
	<script type="text/javascript">
        var auto=new AMap.Autocomplete(autoOptions);
        var placeSearch=new AMap.PlaceSearch({
        	map:mapObj
        });//构造地点查询类
        AMap.event.addListener(auto,"select",select);//注册监听， 当选中某条记录时会触发
        
        var autoOptions={
        	input:"searchipt"
        };
        
		var mapObj=new AMap.Map('mapcanvas',{
			resizeEnable:true,
		});
		
	    scale=new AMap.Scale({
            visible:true
        }),
        toolBar=new AMap.ToolBar({
            visible:true
        }),
        overView=new AMap.OverView({
            visible:true
        }),
        
        mapObj.addControl(scale);
        mapObj.addControl(toolBar);
        mapObj.addControl(overView);

        function select(e){
        	placeSearch.setCity(e.poi.adcode);
        	placeSearch.search(e.poi.name);//关键字查询查询
        }
        
        function toggleScale(checkbox) {
            if (checkbox.checked) {
                scale.show();
            } else {
                scale.hide();
            }
        }
        
        function toggleToolBar(checkbox) {
            if (checkbox.checked) {
                showToolBar();
                showToolBarDirection();
                showToolBarRuler();
            } else {
                hideToolBar();
                hideToolBarDirection();
                hideToolBarRuler();
            }
        }
        
        function toggleToolBarDirection(checkbox) {
            if (checkbox.checked) {
                toolBar.showDirection()
            } else {
                toolBar.hideDirection()
            }
        }
        
        function toggleToolBarRuler(checkbox) {
            if (checkbox.checked) {
                toolBar.showRuler();
            } else {
                toolBar.hideRuler();
            }
        }
        
        function toggleOverViewShow(checkbox) {
            if (checkbox.checked) {
                overView.show();
                document.getElementById('overviewOpen').disabled=false;
            } else {
                overView.hide();
                document.getElementById('overviewOpen').disabled=true;
            }
        }
        
        function toggleOverViewOpen(checkbox) {
            if (checkbox.checked) {
                overView.open();
            }
            else {
                overView.close();
            }
	    }
        
        function showToolBar() {
            document.getElementById('toolbar').checked=true;
            document.getElementById('toolbarDirection').disabled=false;
            document.getElementById('toolbarRuler').disabled=false;
            toolBar.show();
        }
        
        function hideToolBar() {
            document.getElementById('toolbar').checked=false;
            document.getElementById('toolbarDirection').disabled=true;
            document.getElementById('toolbarRuler').disabled=true;
            toolBar.hide();
        }
        
        function showToolBarDirection() {
            document.getElementById('toolbarDirection').checked=true;
            toolBar.showDirection();
        }
        
        function hideToolBarDirection() {
            document.getElementById('toolbarDirection').checked=false;
            toolBar.hideDirection();
        }
        
        function showToolBarRuler() {
            document.getElementById('toolbarRuler').checked=true;
            toolBar.showRuler();
        }
        
        function hideToolBarRuler() {
            document.getElementById('toolbarRuler').checked=false;
            toolBar.hideRuler();
        }
        
//      //加载输入提示插件  
//      mapObj.plugin(["AMap.Autocomplete"], function() {  
//      //判断是否IE浏览器  
//          if (navigator.userAgent.indexOf("MSIE") > 0) {  
//              document.getElementById("searchipt").onpropertychange = autoSearch;  
//          }  
//          else {  
//              document.getElementById("searchipt").oninput = autoSearch;  
//          }
//      });
        
//      //输入提示  
//      function autoSearch() {   
//          var keywords=document.getElementById("searchipt").value;  
//          var auto;    
//          var autoOptions = {  
//          pageIndex:1,  
//          pageSize:10,  
//          city: "" //城市，默认全国  
//      };  
//      auto=new AMap.Autocomplete(autoOptions);  
//      //查询成功时返回查询结果  
//      AMap.event.addListener(auto, "complete", autocomplete_CallBack);  
//      auto.search(keywords);
//      }  
//  }); 
    </script>
    
	</body>

</html>
